<template>
  <div class="tabDiv">
    <el-table
      :data="tableList"
      border
      ref="multipleTable"
      tooltip-effect="dark">

      <div v-if="isShow==1">
        <el-table-column prop="depth" label="孔深(m)" min-width="50">
        </el-table-column>
        <el-table-column
          prop="maxValue"
          label="最大相对位移(mm)"
          min-width="100">
        </el-table-column>
      </div>
      <div v-if="isShow==2">
        <el-table-column label="变化值(mm)" header-align="center">
          <el-table-column
            header-align="center"
            prop="xDisplacement"
            label="X"
            min-width="80">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="yDisplacement"
            label="Y"
            min-width="80">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="zDisplacement"
            label="Z"
            min-width="80">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="xyDisplacement"
            label="XY"
            min-width="80">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="xyzDisplacement"
            label="XYZ"
            min-width="80">
          </el-table-column>
        </el-table-column>
        <el-table-column label="原始值" header-align="center">
          <el-table-column
            header-align="center"
            prop="xCoordinate"
            label="X"
            min-width="90">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="yCoordinate"
            label="Y"
            min-width="90">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="zCoordinate"
            label="Z"
            min-width="90">
          </el-table-column>
        </el-table-column>
      </div>
      <div v-if="isShow==3">
        <el-table-column prop="relativeValue" label="位移值" min-width="60">
        </el-table-column>
        <el-table-column prop="initValue" label="参考基准值" min-width="80">
        </el-table-column>
        <el-table-column prop="speed" label="变化速率(mm/h)" min-width="120">
        </el-table-column>
      </div>
      <div v-if="isShow==4">
        <el-table-column prop="hourlyRainfall" label="过去1小时降雨量（mm）" min-width="80">
        </el-table-column>
        <el-table-column prop="dailyRainfall" label="过去24小时降雨量（mm）" min-width="110">
        </el-table-column>
      </div>
      <div v-if="isShow==5">
        <el-table-column prop="realValue" label="水柱高度(m)" min-width="90">
        </el-table-column>
      </div>
      <div v-if="isShow==7">
        <el-table-column v-for="(item,index) in tabsName" :key="index" :label="item" prop="dataList" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.dataList[index+1].relativeValue}}</span>
          </template>
        </el-table-column>
      </div>
      <div v-if="isShow==8">
        <el-table-column prop="compensateInAngle" label="相对倾角(°)" min-width="100"></el-table-column>
        <el-table-column prop="inRealAngle" label="真实倾角(°)" min-width="100"></el-table-column>
        <el-table-column prop="azRealAngle" label="方位角(°)" min-width="100"></el-table-column>
      </div>
      <div v-if="isShow==15">
        <el-table-column prop="horizontal" label="累计水平位移" min-width="100">
        </el-table-column>
        <el-table-column prop="vertical" label="累计竖向位移" min-width="130">
        </el-table-column>
      </div>
      <el-table-column prop="createTime" label="数据采集时间" min-width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTimer }}
        </template>
      </el-table-column>
    </el-table>
    <div class="tabPagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
  import Format from '@/utils/format'

  export default {
    data() {
      return {
        tableList: [],
        isShow: 0,
        tabsName: [],
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        // 采集数据
        collectionList: [],
        selectionList: []
      };
    }, filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
    },
    methods: {
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      handleCurrentChange(val) {
        this.form.page = val;
        this.dataList()

      },
      dataList() {
        this.tableList = this.collectionList.slice((this.form.page - 1) * this.form.pageSize, this.form.page * this.form.pageSize)
      },
      upDateTable(data, monitorType) {
        this.collectionList = data.recordList || []
        this.form.total = this.collectionList.length;
        if (monitorType == 7) {
          let sersorNames = data.paintList
          sersorNames.forEach((item) => {
            this.tabsName.push(item.sensorName)
          })
          this.tabsName.splice(0, 1)
        }
        this.dataList()
        this.selectionList = JSON.parse(JSON.stringify(this.tableList));
        this.isShow = monitorType
        console.log(  this.isShow)
        if (this.$refs.multipleTable) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleAllSelection();
          });
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .tabDiv {
    width: 96vw;
    height: 100vh;
    text-align: center;
    margin: auto;
    overflow-y: auto;
    /deep/.el-table {
      height: 66vh;
      width: 90vw;
      text-align: center !important;
      overflow: auto;
      margin: auto;

    }

    /deep/.el-pagination {

      /*background: red;*/
      overflow: auto;
      text-align: center;
      align-items: center;
      margin: 10px auto;

    }

    /deep/.el-table::-webkit-scrollbar {
      width: 2px !important;
      height: 0px !important;
    }

    /deep/ .el-pagination::-webkit-scrollbar {
      width: 10px;
      height: 0px;

    }
  }


</style>
